<template>
  <div style="background-color: rgba(255, 255, 255, 1);height:100%">
<!--    <header>-->
<!--      <Row type="flex" justify="space-between">-->
<!--        <Col span="8">-->
<!--          <Row type="flex" justify="start">-->
<!--            <div class="home-user">-->
<!--              <span>-->
<!--                <h3 style="margin-right:15px">{{bloc.form.nickname}}</h3>-->
<!--              </span>-->
<!--&lt;!&ndash;              <span>&ndash;&gt;-->
<!--&lt;!&ndash;                <p style="margin-right:15px">关联手机：{{bloc.form.phone}}</p>&ndash;&gt;-->
<!--&lt;!&ndash;                <p style="margin-right:15px">添加时间：{{getTimeStr(bloc.form.joindate)}}</p>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                <Button icon="ios-trash" @click="removeItem()">删除成员</Button>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;                 </span>&ndash;&gt;-->
<!--&lt;!&ndash;              <span>&ndash;&gt;-->
<!--&lt;!&ndash;                <p style="margin-right:15px">体重：{{bloc.form.weight}}KG</p>&ndash;&gt;-->
<!--&lt;!&ndash;                <p style="margin-right:15px">身高：{{bloc.form.height}}CM</p>&ndash;&gt;-->
<!--&lt;!&ndash;                <p style="margin-right:15px">年龄：{{getYears(bloc.form.birthday)}}</p>&ndash;&gt;-->
<!--&lt;!&ndash;                <p>性别：{{bloc.form.sex === 'M' ? '男' : '女'}}</p>&ndash;&gt;-->
<!--&lt;!&ndash;              </span>&ndash;&gt;-->
<!--            </div>-->
<!--          </Row>-->
<!--        </Col>-->
<!--        <Col span="4">-->
<!--          <Row type="flex" class="user-device-box" justify="space-between" align="middle">-->
<!--            <div>-->
<!--              &lt;!&ndash;              <Button-group>&ndash;&gt;-->
<!--              &lt;!&ndash;                <Button icon="chevron-left">&ndash;&gt;-->
<!--              &lt;!&ndash;                </Button>&ndash;&gt;-->
<!--              &lt;!&ndash;                <Button icon="chevron-right">&ndash;&gt;-->
<!--              &lt;!&ndash;                </Button>&ndash;&gt;-->
<!--              &lt;!&ndash;              </Button-group>&ndash;&gt;-->
<!--              &lt;!&ndash;              <Button-group>&ndash;&gt;-->
<!--              &lt;!&ndash;                <i-button>&ndash;&gt;-->
<!--              &lt;!&ndash;                  <Icon type="ios-arrow-back"></Icon>&ndash;&gt;-->
<!--              &lt;!&ndash;                </i-button>&ndash;&gt;-->
<!--              &lt;!&ndash;                <i-button>&ndash;&gt;-->
<!--              &lt;!&ndash;                  <Icon type="ios-arrow-forward"></Icon>&ndash;&gt;-->
<!--              &lt;!&ndash;                </i-button>&ndash;&gt;-->
<!--              &lt;!&ndash;              </Button-group>&ndash;&gt;-->
<!--            </div>-->
<!--          </Row>-->
<!--        </Col>-->
<!--      </Row>-->
<!--    </header>-->
    <div class="contain">
      <div class="nav">
        <h3 :class="{active: selectType===3}" @click="selectType=3">健康数据</h3>
        <h3 :class="{active: selectType===4}" @click="selectType=4">按摩椅使用日志</h3>
      </div>
      <div class="massage" v-if="selectType===3">
        <Massage :memberId="idx"/>
      </div>
      <div class="massageLog" v-if="selectType===4">
        <MassageLog :memberId="idx"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    // import {ChartBar} from '@/component/charts';
    import Massage from '@/view/family/component/Massage.vue'
    import MassageLog from '@/view/family/component/MassageLog.vue'
    import { Route } from 'vue-router';
    import {InfoBloc} from '@/view/family/InfoBloc';
    import {formatDate} from '@/base/util/Dates';
    import moment from 'moment';
    import {Affiliate} from '@/base/model/Affiliate';

    @Component({
        components: { Massage, MassageLog}
    })
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next(vm => {
                // vm.bloc.load(vm.idx);
            });
        }

        get idx() {
            return Number(this.$route.params.id);
        }

        selectType = 3;
        bloc: InfoBloc = new InfoBloc();

        // removeItem() {
        //     this.$Modal.confirm({
        //         title: '提示',
        //         content: '确认删除后将无法恢复！还要继续吗？',
        //         okText: '删除',
        //         cancelText: '取消',
        //         onOk: () => {
        //             this.bloc
        //                 .removeItem(this.idx)
        //                 .then(() => {
        //                     this.$Message.success('删除成功');
        //                     this.$router.push(`/member/detail/${this.bloc.form.memberId}`);
        //                 })
        //                 .catch((e) => {
        //                     this.$Message.error('删除失败');
        //                 });
        //         }
        //     });
        // }

        getTimeStr(time: string) {
            return formatDate(new Date(time), 'yyyy-MM-dd hh:mm:ss')
        }

        getYears(time: string) {
            const currDate = moment(new Date());
            const birDate = moment(time);
            return Math.ceil(currDate.diff(birDate, 'years', true))
        }

        mounted() {
        }
    }
</script>
<style lang="less" scoped>
  header {
    height: 140px;
    width: 100%;
    font-size: 18px;
    padding: 25px 20px;
    border: 1px solid rgba(242, 242, 242, 1);

    .user-device-box > div {
      width: 120px;
    }

    .home-user {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 15px;
      color: #999;
      font-size: 14px;

      span {
        padding: 5px 0;
        display: flex;

      }
    }
  }

  .contain {
    margin: 20px 0;
    border: 1px solid rgba(242, 242, 242, 1);

    .nav {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(204, 204, 204, 1);
      display: flex;
      justify-content: flex-start;

      h3 {
        padding: 0 20px;
        cursor: pointer;
      }
    }

    .bottom {
      padding: 0px 30px 30px 30px;
    }

    .top {
      width: 100%;
      height: 500px;
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 20px;
      background-color: rgba(255, 255, 255, 1);
    }
  }

  .active {
    border-bottom: 1px solid #559DF9;
    color: #559DF9;
  }
</style>
